<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">

        <cpn :bookList='books' @btnclick="btnclick">

        </cpn>

    </div>


</body>

<template id="cpns">
  <div>
    <button @click="btnclick(book)" style="margin-left: 10px;" v-for="book in booklist">{{book.name}}</button>
  </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [{
                name: '算法导论',
                date: '2005-5',
                moeny: 85,
                sum: 1,
            }, {
                name: 'JavaWeb',
                date: '2005-5',
                moeny: 110,
                sum: 1,
            }, {
                name: 'Springboot',
                date: '2005-5',
                moeny: 105,
                sum: 1,
            }, {
                name: 'Vue',
                date: '2005-5',
                moeny: 60,
                sum: 1,
            }],
            isMsg: true,
        },
        methods: {
            btnclick(book) {
                console.dir(book);
            },
        },
        components: {
            cpn: {
                template: '#cpns',
                props: {
                    booklist: Array,
                },
                methods: {
                    btnclick(book) {
                        this.$emit('btnclick', book);
                    }
                }

            }
        }
    })
</script>